<template>
  <div class="app-container" v-loading="listLoading">
    <SearchForm
      :search-form-config="searchFormConfig"
      @reset-btn-click="handlerReset"
      @search-btn-click="handlerSearch"
      ref="searData"
    ></SearchForm>
    <el-card>
      <template #header>院系授权</template>
      <div class="container-yx" :style="{ height: 'calc(100vh - 281px)' }">
        <div class="flex">
          <el-transfer
            class="transfer"
            v-model="ysq"
            :data="data"
            :titles="['未授权的院系', '已授权的院系']"
            :button-texts="['去左边', '去右边']"
          />
          <div>
            <el-button
              type="primary"
              icon="Refresh"
              style="margin-top: 100px"
              @click="resetChecked"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="Folder"
              style="margin-top: 100px"
              @click="handleSubmit"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import SearchForm from '@/components/SearchForm/index.vue'
import {
  userList,
  xshRoleList,
  wshRoleList,
  saveXshRoleList,
} from '@/api/yx-authorization/index'
import { ElMessage } from 'element-plus'
const listLoading = ref(false)
// 搜索参数
const searchQuery = ref({})
//搜索配置
const searchFormConfig = computed(() => {
  return {
    formItems: [
      {
        field: 'userId',
        label: '系统用户',
        type: 'select',
        placeholder: '请选择系统用户',
        rulesitemStyle: {
          // width:'300px',
          // margin: '0  0 0 90px' ,
        },
        options: [],
        onChange: (val) => {
          userId.value = val
          if (val == '') {
            resetChecked()
            return
          }
          // listLoading.value = true
          // getRoleList()
          // getNoRoleList()
          // listLoading.value = false
        },
      },
    ],
    labelWidth: '110',
    itemStyle: {
      padding: '0 10px',
      margin: '0 10px',
    },
    itemColLayout: {
      lg: 5,
    },
  }
})
// 穿梭框的值
const roleList = ref([])
//已授权
const ysq = ref([])
//下拉框的值
const userId = ref('')
//穿梭框的数据
const data = ref([])
onMounted(() => {
  getUserList()
})
//获取用户的下拉
const getUserList = async () => {
  let res = await userList()
  // let res = {
  //   msg: '操作成功',
  //   code: 200,
  //   data: [
  //     {
  //       value: '100',
  //       label: '张三',
  //     },
  //   ],
  // }
  if (
    searchFormConfig.value &&
    searchFormConfig.value.formItems &&
    searchFormConfig.value.formItems[0]
  ) {
    // 给 options 赋新值
    searchFormConfig.value.formItems[0].options = res.data
  }
}
//获取授权院系
const getRoleList = async () => {
  let params = {
    userId: userId.value,
  }
  let res = await xshRoleList(params)
  // let res = {
  //   msg: '操作成功',
  //   code: 200,
  //   data: [
  //     {
  //       value: '98',
  //       label: '天津轻工职业技术学院联合培养',
  //     },
  //     {
  //       value: '54',
  //       label: '工程训练中心',
  //     },
  //   ],
  // }
  roleList.value = res.data.map((item) => {
    ysq.value.push(item.value)
    return {
      key: item.value,
      label: item.label,
      value: item.value,
    }
  })
}
//未授权的院系
const getNoRoleList = async () => {
  let params = {
    userId: userId.value,
  }
  let res = await wshRoleList(params)

  // let res = {
  //   msg: '操作成功',
  //   code: 200,
  //   data: [
  //     {
  //       value: '10',
  //       label: '人工智能学院',
  //     },
  //     {
  //       value: '13',
  //       label: '体育教学部',
  //     },
  //     {
  //       value: '22',
  //       label: '党委办公室 （校长办公室）',
  //     },
  //     {
  //       value: '24',
  //       label: '党委学生工作部（学生处）',
  //     },
  //     {
  //       value: '03',
  //       label: '化工与材料学院',
  //     },
  //     {
  //       value: '19',
  //       label: '团委',
  //     },
  //     {
  //       value: '32',
  //       label: '国有资产与实验室管理处',
  //     },
  //     {
  //       value: '33',
  //       label: '国际交流处（港澳台事务工作办公室）',
  //     },
  //     {
  //       value: '20',
  //       label: '国际学院',
  //     },
  //     {
  //       value: '23',
  //       label: '图书馆',
  //     },
  //     {
  //       value: '12',
  //       label: '外国语学院',
  //     },
  //     {
  //       value: '27',
  //       label: '天津科技大学资产经营有限公司',
  //     },
  //     {
  //       value: '99',
  //       label: '天津职业大学联合培养',
  //     },
  //     {
  //       value: '25',
  //       label: '宣传部',
  //     },
  //     {
  //       value: '21',
  //       label: '应用文理学院',
  //     },
  //     {
  //       value: '28',
  //       label: '教务处',
  //     },
  //     {
  //       value: '09',
  //       label: '文法学院',
  //     },
  //     {
  //       value: '01',
  //       label: '机械工程学院',
  //     },
  //     {
  //       value: '31',
  //       label: '校医务保健站',
  //     },
  //     {
  //       value: '05',
  //       label: '海洋与环境学院',
  //     },
  //     {
  //       value: '11',
  //       label: '理学院',
  //     },
  //     {
  //       value: '04',
  //       label: '生物工程学院',
  //     },
  //     {
  //       value: '02',
  //       label: '电子信息与自动化学院',
  //     },
  //     {
  //       value: '30',
  //       label: '研究生院（党委研究生工作部）',
  //     },
  //     {
  //       value: '26',
  //       label: '科技处',
  //     },
  //     {
  //       value: '08',
  //       label: '经济与管理学院',
  //     },
  //     {
  //       value: '07',
  //       label: '艺术设计学院',
  //     },
  //     {
  //       value: '06',
  //       label: '轻工科学与工程学院',
  //     },
  //     {
  //       value: '29',
  //       label: '通识教育',
  //     },
  //     {
  //       value: '15',
  //       label: '造纸学院',
  //     },
  //     {
  //       value: '14',
  //       label: '食品科学与工程学院',
  //     },
  //     {
  //       value: '16',
  //       label: '马克思主义学院',
  //     },
  //   ],
  // }
  data.value = res.data.map((item) => {
    return {
      key: item.value,
      value: item.value,
      label: item.label,
    }
  })
  data.value = [...roleList.value, ...data.value]
}
//点击了重置授权
const resetChecked = () => {
  roleList.value = []
  ysq.value = []
  data.value = []
  nextTick(() => {
    getRoleList()
    getNoRoleList()
  })
}
//保存授权
const handleSubmit = async () => {
  let params = {
    userId: userId.value,
    xshs: ysq.value,
  }
  let res = await saveXshRoleList(params)
  // let res = {
  //   msg: '操作成功',
  //   code: 200,
  // }
  if (res.code === 200) {
    ElMessage.success('保存成功')
    nextTick(() => {
      getRoleList()
      getNoRoleList()
    })
  } else {
    ElMessage.error(res.msg)
  }
}
//点击了重置按钮
const handlerReset = () => {
  // getTableData();
  roleList.value = []
  ysq.value = []
  data.value = []
  userId.value = ''
}
//点击了搜索
const handlerSearch = (queryInfo) => {
  if (Object.keys(queryInfo).length === 0) {
    ElMessage.warning('请选择查询条件')
    return
  }
  searchQuery.value = { ...queryInfo }
  listLoading.value = true
  getRoleList()
  getNoRoleList()
  listLoading.value = false
}
</script>

<style lang="scss" scoped>
.container-yx {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .transferP {
    width: 100%;
  }
  .flex {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
//深度选择器
:deep(.el-transfer-panel) {
  width: 400px;
}
:deep(.el-transfer-panel__body) {
  height: 450px;
}
:deep(.el-transfer-panel__list) {
  height: 450px;
}
</style>
